<script lang="ts" setup>
	import getLocationAuth from '@/utils/getLocationAuth.js' //开启定位方法
	import list from '@/components/list2.vue'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'
	import user from '@/api/user.js'
	import comSearch from '@/components/search.vue'
	let gather: any = reactive({
		userinfo: uni.getStorageSync('userinfo'),
		address: {},
		// @ts-ignore
		handimg: `${uni.$baseUrl}/headimg/1686558935248-.jpg`,
		articleList: [],
		nums: {}
	})
	let isShow = ref<boolean>(false)
	let searchValue = ref<string>('')
	//下拉刷新阈值
	let _triggered = ref<boolean>(false)
	let triggered = ref(false)
	let swiperCurrent = ref < number > (0)
	let navList: AnyArray = [{
			name: '微博',
			id: 'wb'
		},
		{
			name: '相册',
			id: 'xc'
		},
	] 
	const upload = (img: any) => {
		uni.uploadFile({
			// @ts-ignore
			url: `${uni.$baseUrl}/upload`,
			filePath: img,
			name: 'file',
			fileType: 'image',
			header: {
				"Authorization": uni.getStorageSync('token')
			},
			formData: {
				type: 1
			},
			success: (res) => {
				let data = JSON.parse(res.data).data
				uni.setStorageSync('userinfo',{...uni.getStorageSync('userinfo'),handimg: data.url})
				getArticleList(()=>{})
			}
		})
	}
	const chooseImg = () => {
		uni.chooseImage({
			count: 1, //
			sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有'original', 
			sourceType: ['album', 'camera'], //从相册选择
			success: async (res: any) => {
				gather.userinfo.handimg = ''
				gather.handimg = res.tempFilePaths[0]
				upload(res.tempFilePaths[0])
			}
		});
	}
	onLoad(() => {
		getArticleList(()=>{})
		getUserDetial()
		// #ifdef APP-PLUS
		uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success: res => {
				// province city district street 省市区
				gather.address = res.address
			},
			fail: () => {
				getLocationAuth()
			}
		})
		// #endif

		// #ifdef H5
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			isHighAccuracy: true,
			success: function(res) {
				gather.address = {
					province: '四川省',
					city: '成都市'
				}
			}
		});
		// #endif

	})
	const back = () => {
		uni.navigateBack()
	}
	const edit = () => {

	}
	//中止触发
	const onAbort = (value: any) => {
		triggered.value = false
	}
	const getArticleList = async (cb: Function) => {
		const res = await user.getArticleList({
			page: 1,
			pageSize: 50,
			userid: gather.userinfo.userid,
			searchValue: searchValue.value
		})
		gather.articleList = res.data
		cb()
	}
	//刷新触发
	const onRefresh = (value: any) => {
		if (_triggered.value) return
		_triggered.value = true
		if (!triggered.value) triggered.value = true
		getArticleList(() => {
			triggered.value = false
			_triggered.value = false
		})
	}
	//复位
	const onRestore = (value:any) => {
		triggered.value = false
		_triggered.value = false
	}
	const listSwitch = (value: any) => {
		swiperCurrent.value = value.current
	}
	const cancel = () => {
		isShow.value = false
	}
	const search = (text: string) => {
		searchValue.value = text
		getArticleList(()=>{
			isShow.value = false
		})
	}
	const getUserDetial = async () => {
		const res = await user.getUserDetial()
		gather.nums = res.data
	}
</script>

<template>
	<view class="main psb">
		<com-search @search="search" @cancel="cancel" v-if="isShow"></com-search>
		<view class="list flex flex-dir-c" v-else>
			<view>
				<uni-nav-bar @clickRight="isShow = true" right-icon="search" left-icon="back" @clickLeft="back"></uni-nav-bar>
				<view class="head">
					<view class="flex flex-ai-c">
						<view class="head-img" style="width: 150rpx;height: 150rpx;" @click="chooseImg">
							<image :src="gather.userinfo.handimg || gather.handimg"></image>
						</view>
						<view style="margin-left: 20rpx;">
							<view>{{gather.userinfo.username}}</view>
							<view class="flex flex-ai-c" style="margin-top: 10rpx;">
								<view>{{gather.nums.fanNum}}粉丝</view>
								<view style="margin: 0 20rpx;">{{gather.nums.followNum}}关注</view>
								<view>0赞</view>
							</view>
						</view>
					</view>
					<view class="info">
						<view>简介：{{gather.userinfo.sign||'这个人很懒'}}</view>
						<view>ip：{{gather.address.province}} {{gather.address.city}}</view>
					</view>
				</view>
				<view class="edit" @click="edit">编辑个人资料</view>
				<u-tabs class="tabs" active-color="rgb(252,186,13)" :list="navList" :is-scroll="false"
					v-model="swiperCurrent"></u-tabs>
			</view>
			
			<view class="list">
				<list @listSwitch="listSwitch" :navList="navList" :swiperCurrent="swiperCurrent" :list="gather.articleList"
					@onAbort="onAbort" @onRefresh="onRefresh" @onRestore="onRestore" :triggered="triggered" />
			</view>
		</view>
	</view>
	
</template>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.main{
		height: 100%;
	}
	.list{
		height: 100%;
	}
	.edit {
		border: 1px solid gainsboro;
		border-radius: 30rpx;
		width: 250rpx;
		height: 60rpx;
		color: gray;
		line-height: 60rpx;
		text-align: center;
		margin: 0 auto;
	}

	.head {
		padding: 0 20rpx;

		.info {
			margin-top: 20rpx;
		}
	}
</style>
